<template>
  <div class="app-shopcar">
    <!-- <header>
     
      <a class="retreat fl" style="padding:17px 15px;" href="./details">
        <img src="@/assets/images/retreat.png" alt="" style="width:8px,height:15px">
      </a>
      <h2 class="header-tit">购物车
        <span>（2）</span>
      </h2>
      <button class="operation editcart">完成</button>
    </header> -->

    
    <!-- <ul class="shoppingCart-list">
            <li style="border-bottom:none; padding-top:100px;">
                <img src="http://361cdn.361sport.com/tel/images/cartempty.png">
            </li>
            <li style=" padding-left:22px; border-bottom: none; text-align:center;">您的购物车是空的，马上
                 <a href="/Tel/Product/shop.html" style="color:#F99302; text-decoration: underline;">去逛逛</a>
            </li>
    </ul>-->

    <ul class="shoppingCart-list">
      <li class="clearfloat" v-for="car in cars" :key="car.id">
        <span data-cartid="141401" class="select selected"></span>
  
        <a class="select" data-cartid="141401" style="display:none;"></a>
        <a href="/Tel/Product/show/prono/Y819.html">
          <img :src="car.spriteSheet" class="img">
        </a>
        <div class="shoppingCart-commodity">
                    <div class="shoppingCart-product fl" style="padding:0px;">
                        <div style="display: table-cell; vertical-align: middle; height: 60px; line-height: 17px;">
                            <h2> {{car.title}} </h2>
                            <p>颜色：灰色/黑色   尺码：39.5</p>
                        </div>
                    </div>
                    <div class="shoppingCart-parameter">
                        <div style="display: table-cell; vertical-align: middle; height: 60px; line-height: 17px;">
                            <p data-price="899.00"> {{  car.localPrice }} </p>
                            <span>×{{ car.num}}</span>
                        </div>
                    </div>
        </div>
        <div class="shoppingCart-num fr" data-cartid="141401" style="position:relative;">
          <button class="shoppingCart-numMinus" data-type="less" @click="reduceCar(car)">-</button>
          <input type="number" v-model="car.num" readonly="readonly">
          <button class="shoppingCart-numPlus" data-type="add" @click="addCar(car)">+</button>
        </div>
      </li>
    </ul>

    <div class="shoppingCart-btn clearfloat">
      <span class="select selected">全选</span>
      <a class="select" style="display:none;">全选</a>
      <div class="fr shoppingCart-total">
        <p>
          合计：
          <span>￥{{ totalInfo.price }}</span>
        </p>
        <button onclick>
          结算
          <span>（{{ totalInfo.num }}）</span>
        </button>
      </div>
      <!-- <div class="fr shoppingCart-operation clearfloat">
                <button id="removecollect" data-type="collect" onclick="">
                    移到收藏夹
                </button>
                <button id="deletecart" data-type="remove" onclick="">
                    删除
                </button>
      </div>-->
    </div>
  </div>
</template>
<script>

import { mapState, mapActions, mapGetters } from "vuex";

export default {

  created() {
    console.log(this.cars);
  },
  computed: {
    ...mapGetters(["totalInfo"]),
    ...mapState({
      cars: state => state.buycar.cars
    })
  },
  methods: {
    ...mapActions(["addCar", "reduceCar"])
  }
};
</script>

<style lang="stylus" scoped>
.app-shopcar 
  padding-top 0.5rem
  height 100%
  padding-buttom 0.2rem
  .shoppingCart-list 
    background-color: #fff
    li 
      font-size 0.16rem
      padding 0.15rem 0
      a 
        color #f99302
        text-decoration underline
      img 
        display block
        max-width 100%
        margin 0 auto
        border none
        vertical-align middle
  .shoppingCart-btn 
    width 100%
    border-top 0.01rem solid #F0F0F0
    line-height 0.45rem
    position fixed
    bottom 0
    background-color #fff
    .select 
      float left
      padding 0 0.02rem
      padding-left 0.22rem
      margin 0 0.1rem
      color #1a1a1a
      font-size 0.16rem
    .shoppingCart-total 
      p
        float left
        font-size 0.15rem
        color #1a1a1a
        span 
          color #F99302
      button 
        float right
        width 1.4rem
        margin-left 0.15rem
        height 0.45rem
        background-color #F99302
        font-size 0.15rem
        color #fff
        font-weight 100
        cursor pointer
        border none
        outline none
  .shoppingCart-list li 
    border-bottom 1px solid #F0F0F0
    padding .15rem 0
    padding-right .08rem
  .shoppingCart-list li .selected 
    // background url(../images/chosen2.png) no-repeat
    // background-size 100%
  .shoppingCart-list li .select 
    float left
    width 16px
    height 16px
    // background: url(../images/chosen.png) no-repeat;
    // background-size: 100%;
    margin: 22px 10px;
  

  .shoppingCart-list li .img 
    float: left;
    width: 0.58rem;
    height: 0.58rem;
    border: 0.01rem solid #F0F0F0;
    display: block;
    max-width: 100%;
    margin: 0 auto;
    vertical-align: middle;
  

  .shoppingCart-product 
    width: 50%;
    overflow: hidden;
    margin-left: 10px;
    padding: 13px 0;
  
  .shoppingCart-product h2 
    width: 100%;
    font-size: 15px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
  

  .shoppingCart-product p 
    font-size: 12px;
    color: #F99302;
    margin-top: 3px;
  

  .shoppingCart-parameter 
    float: right;
    text-align: right;
    margin-right: 10px;
  

  .shoppingCart-parameter span 
    display: inline-block;
    font-size: 12px;
    color: #808080;
    margin-top: 3px;
  

  .shoppingCart-num 
    padding: 14px 10px;
  

  .shoppingCart-numMinus, .shoppingCart-numPlus 
    float: left;
    width: 30px;
    height: 30px;
    font-weight: 100;
    cursor: pointer;
    font-family: 'Microsoft YaHei', 'Arial';
    border: none;
    outline: none;
  

  .shoppingCart-num input 
    float: left;
    width: 50px;
    margin: 0 15px;
    height: 30px;
    font-size: 15px;
    color: #1a1a1a;
    text-align: center;
  header 
    position: fixed;
    width: 100%;
    background-color: #000;
    z-index: 99;
    .retreat 
      position: absolute;
      width: 8px;
      height: 15px;
      padding: 25px 15px;
    .header-tit 
      font-size: 18px;
      color: #fff;
      text-align: center;
      padding: 16px 0;
    .operation 
      position: absolute;
      right: 8px;
      top: 16px;
      font-size: 15px;
      color: #F99302;
      background-color: transparent;




</style>
